<template>
  <div>
        <h2>房型信息</h2>
        <table class="table table-bordered">
            <tr>
                <td>房型名称</td>
                <td>
                    <input type="text" v-model="queryInfo.name">
                </td>
            </tr>
            <tr>
                <td>单价</td>
                <td>
                    <input type="text" v-model="queryInfo.price">
                </td>
            </tr>
            <tr>
                <td>室内面积</td>
                <td>
                    <input type="text" v-model="queryInfo.mian">
                </td>
            </tr>
            <tr>
                <td>最多入住人数</td>
                <td>
                    <input type="text" v-model="queryInfo.ren">
                </td>
            </tr>
            <tr>
                <td>图片上传</td>
                <td>
                    <input type="file" @change="img" />
            <img
              v-if="queryInfo.tu != ''"
              :src="queryInfo.tu"
              width="100"
              height="100"
              alt=""
            />
                </td>
            </tr>
            <tr>
                <td>房型描述</td>
                <td>
                    <textarea v-model="queryInfo.miao"></textarea>
                </td>
            </tr>
            <tr>
                <td>是否有窗</td>
                <td>
                    <input
              type="radio"
              name="shi"
              value=0
              v-model="queryInfo.shi"
            />是
            <input
              type="radio"
              name="shi"
              value=1
              v-model="queryInfo.shi"
            />否
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="修改" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import {reactive,ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
let route=useRoute();
let queryInfo=reactive({
  "name": "",
  "price": 0,
  "mian": 0,
  "ren": 0,
  "tu": "",
  "miao": "",
  "shi": 0,
  "isDeleted": false,
  Id:route.query.id,
})
onMounted(()=>{
    FanTian();
})
const FanTian=()=>{
    axios({
        url:'https://localhost:7203/api/FangXing/FanTian',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res);
        queryInfo.name=res.data.name;
        queryInfo.price=res.data.price;
        queryInfo.mian=res.data.mian;
        queryInfo.ren=res.data.ren;
        queryInfo.tu=res.data.tu;
        queryInfo.miao=res.data.miao;
        queryInfo.shi=res.data.shi;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const img = (e: any) => {
  console.log(e);
  let obj = e.target.files[0];
  let f = new FormData();
  f.append('file', obj);

  axios({
    url: 'https://localhost:7203/api/FangXing/Img',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片') {
        alert('上传的不是图片');
        return;
      }

      if (res.data == '大于2M') {
        alert('上传图片的大于2M');
        return;
      }

      queryInfo.tu = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
const add=()=>{
    axios({
        url:'https://localhost:7203/api/FangXing/Upd',
        method:'put',
        data:queryInfo
    })
    .then((res)=>{
        console.log(res);
        alert("成功!");
        router.push("/fangxingshow")
    })
    .catch((err)=>{
        console.log(err);
        alert("失败!");
    })
}
</script>

<style scoped>

</style>